<template>
  <div style="padding-bottom: 20px;">
    <div class="df">
      <h2>选择需要结算的药品 <span style="margin-left: 20px;color: #200281;">{{ add.orderNo }}</span></h2>
    </div>
    <el-row :span="6" class="df" style="margin: 20px 0;">
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
        <span style="display: block;width: 80px;">医药机构:</span>
        <el-input v-model="instName.label" size="mini" :disabled="true"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="margin-right: 20px;">集采批次:</span>
        <el-select v-model="value3" size="mini" placeholder="请选择" :clearable="true">
          <el-option v-for="item in form" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
        <span style="display: block;width: 80px;">订单号:</span>
        <el-select v-model="value4" size="mini" placeholder="请选择" :clearable="true" >
          <el-option v-for="item in form2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span style="margin-right: 20px;">流水号:</span>
        <el-select v-model="value5" size="mini" placeholder="请选择" :clearable="true">
          <el-option v-for="item in form4" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-button type="primary" class="ml" size="mini" @click="search">查询</el-button>
    </el-row>
    <el-alert size="mini" show-icon
      style="background-color: #d3deee;border: 1px solid #2558ac; color: #2558ac;font-size: 14px;">
      药品种类总数 <span class="number" style="color: #2558ac;font-weight: 700;">{{ num }}</span> 项，总金额<span class="number" style="color: #2558ac;font-weight: 700;">{{ priceSum }}</span>元。
    </el-alert>
    <el-table :data="tableData" style="width: 100%;margin-top: 20px;" size="mini"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" @change="getList()">
      </el-table-column>
      <el-table-column prop="batchName" label="集采批次" width="180">
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" width="180">
      </el-table-column>
      <el-table-column prop="medicineNo" label="流水号" width="180">
      </el-table-column>
      <el-table-column prop="medicineName" label="通用名" width="180">
      </el-table-column>
      <el-table-column prop="categoryName" label="品种名称">
      </el-table-column>
      <el-table-column prop="shotType" label="剂型">
      </el-table-column>
      <el-table-column prop="specification" label="规格">
      </el-table-column>
      <el-table-column label="采购数量">
        <template slot-scope="scope">
          {{ scope.row.purchaseAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="purchasePrice" label="采购价(元)">
      </el-table-column>
      <el-table-column prop="purchaseFee" label="采购金额(元)">
      </el-table-column>
      <el-table-column prop="instName" label="医药机构">
      </el-table-column>

    </el-table>
    <div class="block" style="margin: 20px 0;margin-left: 60%;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="SIZE"
        :page-sizes="[20, 30, 40, 50]">
      </el-pagination>
    </div>
   <div style="display: flex;">
    <el-button class="width" style="margin-right: 60px;margin-left:40%;display: flex;align-items: center;justify-content: center;" type="primary" @click="toUpdate">确认</el-button>
    <el-button class="width" @click="hide" style="display: flex;align-items: center;justify-content: center;">取消</el-button>
   </div>
  </div>
</template>
    
<script>
import { getDetail,getSeDetail } from "../../api/businessTwo/orderDetail"
export default {
  props: {
    add: {
      type: Object,
    },
    instName: {
      type: Object,
    },
    flag: {
      type: Boolean
    }
  },
  data() {
    return {
      form3: [],
      checked: true,
      pageSize: 20,
      form2: [],
      value4: null,
      value5: null,
      SIZE: 0,
      form1: null,
      value2: null,
      value3: null,
      num: 0,
      form4: [],
      priceSum: 0,
      currentPage: 1,
      value: true,
      form: [
      ],
      tableData: [],
      tableData1:[]
    }
  },
  created() {
    this.getList()

    console.log(this.instName);
  },
  watch: {
     value3(newValue,oldValue){
this.getList()
    },
    value4(newValue,oldValue){
          if(newValue==""||newValue==null){
            
            this.value4=null
            console.log(this.value4);
            this.getList()
          }
          this.getList(this.value4)
    },
    value5(newValue,oldValue){
          if(newValue==""||newValue==null){
            
            this.value5=null
            this.getList()
          }
          this.getList()
    }

  },
  methods: {
    async getList(value) {
  

      let res = await getDetail({
        size: this.pageSize,
        current: this.currentPage,
        instId: this.instName.vlaue,
        batchId: this.value3,
        orderNo: value,
        medicineNo: this.value5
      })
      
      this.SIZE=res.data.data.total
      this.tableData = res.data.data.records
     
        let arr = []
        let arr1 = []
        let arr2 = []
        this.num = res.data.data.total
     
        res.data.data.records.map((v) => {
          console.log(res);
          console.log(v.orderNo);
          arr.push({ value: v.orderNo, label: v.orderNo })
          arr1.push({ value: v.medicineNo, label: v.medicineNo })
          arr2.push({ value: v.batchId, label: v.batchName })
        })
        console.log(arr2);
        arr1.forEach((item) => {
          if (!this.form4.some(m => m.value === item.value)) {
            this.form4.push(item);
          }
          return this.form4;
        })
        

        arr2.forEach((item) => {
          if (!this.form.some(m => m.value === item.value)) {
            this.form.push(item);
            console.log(item);
          }
          return this.form;
        })
   console.log(this.form);
        arr.forEach((item) => {
          if (!this.form2.some(m => m.value === item.value)) {
            this.form2.push(item);
          }
          return this.form2;
        });

      this.number()
  console.log(this.tableData);
    },


    getTo() {
      this.$emit("getTo", this.tableData)
    },
    number() {
      
    },
    handleSelectionChange(val) {
      console.log(val);
      this.num=val.length
      this.priceSum = 0
      
   
      val.map((v) => {
        if (v.purchaseFee === null) {
          v.purchaseFee = 0
        }
        this.priceSum += parseFloat(v.purchaseFee)
        console.log(parseFloat(v.purchaseFee));
        return v
      })
      console.log(this.priceSum);
      console.log(this.SIZE);
      this.tableData1=val
console.log(this.tableData1);
    },
    toUpdate() {
      this.$emit("chooseData", this.tableData1)
      this.$message.success('提交成功');
      this.hide()
    },
    typec(a) {
      if (a.row.status == 0) {
        a.row.label = "已入库"
        return "success"
      } else {
        a.row.label = "未入库"
        return "info"
      }
    },
    toTop(data1) {
      console.log(data1);
    },

    search() {
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    hide() {
      this.$emit("changeTwo", false)
    }
  }
}
</script>
    
<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
}
::v-deep .el-alert{
      padding:4px 16px !important;
    }
    ::v-deep .el-alert__icon.is-big{
      font-size:22px !important;
    }
    ::v-deep .el-alert__description{
      margin:0

    }
.jcsb {
  justify-content: space-between;
}

::v-deep .el-alert--info .el-alert__description{
  color:#000!important;
  font-size: 14px;
}
.el-table {
  margin-bottom: 30px;
}

.ml {
  margin-left: 60px;
}

::v-deep th {
  background-color: #f1f1f1;
}

::v-deep .el-table__cell {
  height: 50px !important;
}

h2 {
  font-size: 18px;
}

.width {
  width: 120px;
  height: 36px;
}

.ret {
  margin-left: 30%;
  margin-right: 60px;
}

.number {
  font-size: 16px;
  color: #62c7f8;
}

::v-deep th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table__cell {
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
}

::v-deep .cell {
  display: flex;
  justify-content: center;
}
</style>